<template>
  <div class="school-pic">
    <div v-for="(item, index) in props.schoolPicParams" :key="index">
      <img class="pic" :src="item.imgUrl" alt="" @click="showImagePreviewFn(index)" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { showImagePreview } from "vant";
const props = defineProps({
  schoolPicParams: {
    type: Array,
    default: () => [],
  },
});
const imgList = ref([]);

const showImagePreviewFn = (index) => {
  showImagePreview({
    images: imgList.value,
    startPosition: index,
    closeable: true,
    closeIconPosition: "top-right",
    closeIcon: "close",
    closeIconColor: "#000",
    closeIconSize: "40px",
  });
};
onMounted(() => {
  props.schoolPicParams.forEach((item) => {
    imgList.value.push(item.imgUrl);
  });
});
</script>

<style lang="scss" scoped>
.school-pic {
  width: 100%;
  height: 100%;
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 19px;
  overflow: scroll;

  > div {
    // 每个图片容器占据一行的四分之一宽度，减去间隙
    flex-basis: calc((100% - 3 * 19px) / 4);
  }

  .pic {
    width: 100%;
    height: 275px;
    border-radius: 8px;
    // 保持图片比例并覆盖容器
    object-fit: cover;
  }
}
</style>
